<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool-视频服务</title>
    <link rel="stylesheet" href="/static/base.css"/>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>

    <style>
        .banner {
            text-align: center;
            margin-top: 64px;
        }

        .tool-descript {
            margin-top: 18px;
            font-size: 20px;
            color: #606266;
            text-align: center;
        }

        .card-title {
            font-size: 22px;
            color: #606266;
        }

        .card-descript {
            color: #909399;
            margin-top: 18px;
            font-size: 16px;
            line-height: 180%;
        }

        code {
            display: block;
            border: solid 1px #445d6e;
            padding: 12px;
            background-color: #445d6e;
            color: #ffffff;
            font-size: 16px;
            margin-top: 20px;
        }

        h2  {
            color: #606266;
        }

        .simple-title {
            font-size: 20px;
            color: #606266;
            margin: 40px 0px 20px 0px
        }

        .port-table {
            margin-left: 20px;
            color: #606266;
        }

    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="index.html"></top-menu>
        </template>
        <template #main>
            <el-main class="index-main">
                <div class="banner">
                    <img src="/static/logo.png"/>
                </div>
                <div class="tool-descript">
                    <p>
                        ZTool可以测试ZLMediakit服务是否正常运行，并可以对ZL服务进行管理，同时自带调试页面，
                        <br/>并提供web播放插件示例
                    </p>
                </div>
                <el-divider style="margin: 50px 0px"></el-divider>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="card-title">媒体中心</div>
                        <div class="card-descript">对ZLMediakit媒体服务进行管理、配置，并提供守护服务，比如无人观看自动停止</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="card-title">Web播放器</div>
                        <div class="card-descript">使用Jessibuca播放器在Web端播放ws-flv、http-flv流的视频及使用的示例</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="card-title">在线测试</div>
                        <div class="card-descript">在线测试转流，并查看转流结果以及在线播放，查看转流是否正常，方便调试</div>
                    </el-col>
                </el-row>
                <el-divider style="margin-top: 50px"></el-divider>
                <div>
                    <h2>快速使用</h2>
                    <h2>#Docker</h2>
                    <div class="simple-title">获取docker镜像</div>
                    <code>docker pull ssbp/zlmediakit:v1.4</code>

                    <div class="simple-title">运行docker</div>
                    <code>docker run --name zlmediakit -id -p 1935:1935 -p 9999:9000 -p 9002:80 -p 8554:554 --restart=always ssbp/zlmediakit:v1.4</code>

                    <h2>#本地程序</h2>

                    <div class="simple-title">端口说明</div>
                    <table class="port-table">
                        <tr>
                            <td width="120">80</td>
                            <td>视频服务端口</td>
                        </tr>
                        <tr>
                            <td>9000</td>
                            <td>ZLMediakit端口</td>
                        </tr>
                        <tr>
                            <td>1935</td>
                            <td>RTMP端口</td>
                        </tr>
                        <tr>
                            <td>554</td>
                            <td>RTSP端口</td>
                        </tr>
                    </table>

                </div>
            </el-main>
        </template>
    </layout>
</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/request.js"></script>
<script>
    new Vue({
        el: '#app',
        comments: true,
        data: function() {
            return {
                visible: false,
                isLogin: sessionStorage.getItem("token")
            }
        },
        created: function () {
            this.$nextTick(() => {
                if(!sessionStorage.getItem("token")) {
                    //jumpto login
                    window.location.href="/login.html"
                    sessionStorage.removeItem("token")
                    sessionStorage.removeItem("user")
                }
            });
        },
    })
</script>
</html>